import $ from '../library/jquery.js';
import coolie from '../library/cookie.js';
import cookie from '../library/cookie.js';
$(function(){
    $('.header-shop').on('mouseover',function(){
        $('#shop').slideDown(200);
        $('.header-shop>span').css('color','orangered')
        $('.header-shop>span>a').css('color','orangered')
    })
    $('.header-shop').on('mouseleave',function(){
        $('#shop').slideUp(200);
        $('.header-shop>span').css('color','#B0B0B0')
        $('.header-shop>span>a').css('color','#B0B0B0')
    });




    

    $('#site-header-botto-1').on('mouseenter',function(){
        $('#site-header-bottom').slideDown(200);
    })
    $('#site-header-botto-1').on('mouseleave',function(){
        $('#site-header-bottom').slideUp(200);
    })

    $('.site-header-nav-frist').on('mouseenter',function(){
        $('.hero-left').slideDown(200);
    })
    $('.site-header-nav-frist').on('mouseleave',function(){
        $('.hero-left').slideUp(200);
    })



    



    $('body').on('mousewheel',function(){
        if( $(document).scrollTop()>900){
         $('.last-app').css('display','block')
        }
      else{
       $('.last-app').css('display','none')
      }
  })



let id = location.search.split('=')[1];

$.ajax({
    url: '../interface/getitem.php',
    type: 'get',
    data: { id },
    dataType: 'json'
}).then(res => {
    // let template = `
    // <h1>商品详情</h1>
    // <h2>${res.title}</h>
    // <div>
    //   <img src='./${pic[2].src}'>
    // </div>
    // <div class="price">价格:${res.price}</div>
    // <div>
    //   <input type="number" id="num" value="1" min="1" max="${res.num}">
    //   <input type="button" value="加入购物车" id="addItem"> 
    // </div>
    // <div>${res.details}</div>
    // `;
// console.log(template);
    let pic = JSON.parse(res.picture);
    let col = JSON.parse(res.type);
    let template = '';

    template +=` <div class="center-center-left">
    <div class="img-box">
        <img src="./${pic[0].src}" alt="">    
    </div>
</div>
<div class="center-center-right">
    <h2>${res.title}</h2>
    <p>
        <span>米金兑换98折优惠券，先兑券后购买~！	</span>
        ${res.details}
    </p>
    <footer>小米自营</footer>
    <span>${res.price}元</span>
    <i></i>
    <div class="center-address">
        <span class="iconfont icon-31dingwei
        "></span>
        <div class="center-address-top">
            <span>北京</span>
            <span>北京市</span>
            <span>海淀区</span>
            <span>清河街道</span>
            <a href="javascript:;">修改</a>
        </div>
        <div class="center-address-buttom">
            <span>有现货</span>
        </div>  
    </div>
    <div class="center-color">
        选择颜色
    </div>
    <ul>
        <li><a href="javascript:;">${col[0].color[0]}</a></li>
    </ul>
    <div class="center-pire">
        <ul>
            <li>${res.title}
                <span>${col[0].price[0]}元</span>
            </li>
            
        </ul>
        <div class="center-price">
            总计：${res.price}元
        </div>
    </div>
    <div class="center-shop">
        <div class="center-shop-go"><a href="javascript:;">加入购物车</a></div>

        <div class="center-shop-like">
            <a href="javascript:;"> <span class="iconfont icon-31dingwei
                "></span>
                喜欢</a>
           
        </div>
    </div>
    <div class="center-bottom">
        <span class="iconfont icon-checkbox_sel"><a href="javascript:;">小米自营</a>
        </span>
        <span class="iconfont icon-checkbox_sel">
            <a href="javascript:;">小米发货</a></span>
        <span class="iconfont icon-checkbox_sel">
            <a href="javascript:;">7天无理由退货</a></span>
        <span class="iconfont icon-checkbox_sel">
            <a href="javascript:;">运费说明</a></span>
        <span class="iconfont icon-checkbox_sel">
            <a href="javascript:;">企业信息</a></span>
        <span class="iconfont icon-checkbox_sel">
            <a href="javascript:;">7天价格保护</a></span>
    </div>  
</div>`;

    $('.center-center').html(template);


    $('.center-shop-go').on('click',function(){
        addItem(res.id,1);
        
    });
}).catch(err => {
    console.log(err);
});

function addItem(id, num) {
    let product = { id, num };

    // console.log(product);

    let shop = cookie.get('shop'); // 获取cookie中的shop


    if (shop) { // 判断shop已有数据
        shop = JSON.parse(shop); // shop 字符串转数组

        // 需要判断当前的商品再shop中是否已存在 如果存在则修改数量 不存在则添加
        if (shop.some(el => el.id === id)) { // 判断当前商品存在
            let index = shop.findIndex(elm => elm.id === id); // 找到商品的索引
            let count = parseInt(shop[index].num);
            count += parseInt(num);
            shop[index].num = count;
        } else {
            shop.push(product);
        }

    } else {
        shop = [];
        shop.push(product);
    }

    cookie.set('shop', JSON.stringify(shop));
}

})
